<template>
<!--企业排名-->
    <div class="Company_rank">
        <ul>
            <li v-for="(item, index) in listData" :key="index">
                <div class="top">
                    <span>NO.{{ index+1}}</span>
                    <span>
                        {{ item.name }}
                    </span>
                </div>
                <div class="line">
                    <div class="line_bg">
                        <div class="line_bg_active" :style="{ background: item.lineColor }"><span></span></div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script lang="ts" setup>
/*
* listData  name 企业名称
*           value 值
*           lineColor 值的背景颜色
* */
interface Props {
    listData:Array<any>
}
const props = withDefaults(defineProps<Props>(), {
    listData:()=>[]
});
</script>

<style scoped lang="scss">
.Company_rank{
    height: 100%;
    ul {
        li {
            margin-bottom: vh(10);
            &:last-of-type {
                margin-bottom: 0;
            }
            .top {
                display: flex;
                align-items: center;
                padding-left: 5px;
                span {
                    font-size: 12px;
                    color: #D3E9FC;
                    &:nth-of-type(1) {
                        font-size: 14px;
                        @include pmzd();
                        color: #FFFFFF;
                        background: linear-gradient(0deg, #2DBAFB 0%, #58F3FD 99.5849609375%);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                        margin-right: 50px;
                        letter-spacing: 2px;
                        font-width: bold;
                    }
                }
            }
            .line {
                margin-top: vh(8);
                &_bg {
                    width: 100%;
                    background: #084C99;
                    position: relative;
                    height: 4px;
                    &_active {
                        position: absolute;
                        left: 0;
                        top: 0;
                        height: vh(4);
                        width: 50%;
                        span {
                            position: absolute;
                            right: -4px;
                            top: -3px;
                            display: block;
                            width: 6px;
                            height: 6px;
                            background: #fff;
                            border-radius: 100%;
                            border: 2px solid #23fffc;
                            padding: 3px;
                        }
                    }
                }
            }
        }
    }
}
</style>